
<template>
  <div class="box">
    <form action="/">
      <van-search v-model="value" shape="round" :autofocus="true" show-action placeholder="输入症状、疾病、医院、科室、医生"
        @search="onSearch" @cancel="onCancel" />
    </form>
    <!-- 热门搜索 -->
    <div class="searchHot">
      <div class="hotTitle">
        <h2>热门搜索</h2>
      </div>
      <div class="HtoList">
        <span class="span" v-for="(item, index) in resou" :key="index">
          <div>
            <span>{{ item.recommend_word }}</span>
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { showToast } from 'vant';
const value = ref('');
const onSearch = (val: string) => showToast(val);
const onCancel = () => showToast('取消');


import { getrs } from '../../request/http'
const resou = ref<any>([])

getrs().then(res => {
  console.log(res.data.data.hot_search_words)
  resou.value = res.data.data.hot_search_words
})
<style lang="scss" scoped>
header {
    text-align: center;
       .mock-top{
        img{
     
            left: 10px;
            top: 18px;
        }
           
       }
    img{
         width: 25px;
         height: 25px;
         position: fixed;
         top: 18px;
         left: 54px;
    }
    input {
        margin: 10px 0;
        padding-left: 38px;
        width: 70%;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        border:none;
        background-color: #efefef;
        font-size: 15px;
    }

    span {
        color:#4bd37c;
        margin-left: 15px;
    }
}


.remen {
    width: 100%;
    margin: 0 auto;
    position: relative;

</style>



